<template>
  <div class="book-shelf-item" @click="readingBook(book.id,book.currentChapterId)">
    <div v-if="book.isEnd" class="book-status-end">完结</div>
    <div v-else class="book-status-serializing">连载中</div>
    <img class="book-cover" :src="book.coverImage" :alt="book.title" />
    <div class="book-name">{{ book.title }}</div>

    <div class="book-progress" v-if="book.currentChapter === 0">未阅读</div>
    <div
      class="book-progress"
      v-else-if="book.currentChapter === book.totalChapter"
    >
      已读完
    </div>
    <div v-else class="book-progress">
      {{ book.currentChapter }}章/{{ book.totalChapter }}章
    </div>
  </div>
</template>

<script>
export default {
  name: "BookComponent",
  props: {
    book: {
      type: Object,
      required: true,
      //   validator: (value) => {
      //     // 验证每本书都有必要的属性
      //     return value.every(book => book.title && book.author && book.coverImage);
      //   },
    },
  },
  data() {
    return {
    };
  },
  methods: {
    readingBook(novelId,chapterId) {
      this.$router.push({ name: "novelReading", params: { novelId: novelId,chapterId:chapterId } });
    },
  }
};
</script>

<style>
.book-shelf-item {
  width: 300px;
  height: 300px;
  margin: 10px;
  background-color: rgb(239 239 239);
}

.book-cover {
  width: 120px;
  height: 160px;
  margin: 30px 90px;
}

.book-name {
  text-align: center;
}

.book-progress {
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  width: 100%;
  word-wrap: normal;
  white-space: nowrap;
}

.book-status-end {
  font-size: 10px;
  width: 20px;
  position: relative;
  top: 17%;
  left: 60%;
  margin: 1px;
  border-radius: 1px;
  background-color: rgb(216, 214, 236);
}
.book-status-serializing {
  font-size: 10px;
  width: 30px;
  position: relative;
  top: 17%;
  left: 59%;
  margin: 1px;
  border-radius: 1px;
  background-color: rgb(216, 214, 236);
}
</style>